<template>
  <div>
    <template>
      <div>
        <!-- v-for 指令用于遍历数组中的每个元素 -->
        <div v-for="item in arr" :key="item.id" style="float: left; margin-left: 80px; margin-top: 50px;">
          <div style="display: flex;">
            <div style="margin-right: 20px;">
              <!-- 图片放在左边 -->
              <img v-if="item.pic" :src="item.pic" alt="" class="rotating" style="width: 100px; height: 100px;">
            </div>
            <el-card style="max-width: 480px;">
              <!-- 其他数据放在右边 -->
              <template #header>
                <div>
                  <span>{{ item.name }}</span>
                </div>
              </template>
              <div>
                <p class="text item">地址: {{ item.address }}</p>
                <p class="text item">小区名称: {{ item.name }}</p>
                <p class="text item">实有房屋: {{ item.houseCount }}</p>
                <p class="text item">实有单位: {{ item.registerCount }}</p>
                <p class="text item">实有车辆: {{ item.vehicleCount }}</p>
                <p class="text item">实有力量: {{ item.equipmentCount }}</p>
                <p class="text item">实有设备: {{ item.equipmentCount }}</p>

                <!-- 如果需要显示更多信息，可以继续添加 -->
              </div>
              <template #footer>
                Footer content
              </template>
            </el-card>
          </div>
          <!-- 实有人口等字段放在卡片外面 -->
<!--          <div style="text-align: center; margin-top: 10px;">-->
<!--            <span>实有人口: {{ item.populationCount }}</span>-->
<!--            <span style="margin-left: 20px;">实有房屋: {{ item.houseCount }}</span>-->
<!--            <span style="margin-left: 20px;">实有单位: {{ item.registerCount }}</span>-->
<!--            <span style="margin-left: 20px;">实有车辆: {{ item.vehicleCount }}</span>-->
<!--            <span style="margin-left: 20px;">实有力量: {{ item.equipmentCount }}</span>-->
<!--            <span style="margin-left: 20px;">实有设备: {{ item.equipmentCount }}</span>-->
<!--          </div>-->
        </div>
      </div>
    </template>
    <el-table :data="arr" style="width: 100%">
      <el-table-column label="小区名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实有人口" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.populationCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="户籍人口" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.registerCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="外来人口" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.foreignerCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="境外人口" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.foreignCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实有房屋" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roomCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="自住房" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.houseCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="租赁房" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.leaseCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="闲置房" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.idleCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="其他" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.otherCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实有车辆" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.carCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实有设备" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.equipmentCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="视频设备" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.videoCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="人脸卡口" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.faceCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆卡口" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.vehicleCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="门禁设备" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.doorCount }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.plot.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="this.plot.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.plot.total">
    </el-pagination>


  </div>
</template>

<script>
import {list} from "@/api/community/list";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        arr:[],
        plot:{
          pageNum:1,
          pageSize:5,
          total:1
        }
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      handleSizeChange(val) {
        console.log(val)
        this.plot.pageSize=val
        this.list()
      },
      handleCurrentChange(val) {
        console.log(val)
        this.plot.pageNum=val
        this.list()
      },
      list(){
        list(this.plot.pageNum,this.plot.pageSize).then(
          res => {
            console.log(res)
            this.arr = res.data.list
            this.plot.total=res.data.total
          }
        )
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
      this.list()
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
<style>
/* 定义旋转动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 应用旋转动画到图片上 */
.rotating {
  animation: rotate 5s linear infinite; /* 5秒内旋转360度，无限循环 */
}
</style>
<style>
/* 定义旋转动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 应用旋转动画到图片上 */
.rotating {
  animation: rotate 5s linear infinite; /* 5秒内旋转360度，无限循环 */
}
</style>
